import React, { Component ,createContext,useContext,useRef} from 'react'

const countContext = createContext();  //传宝箱

// class Child extends Component{
//     render(){
//         return <div>
//             <countContext.Consumer>
//                 {val => <div>{val.count} -{val.address}</div>}
//             </countContext.Consumer>
//         </div>
//     }
// }

function Child(){
    let val = useContext(countContext);

    let box = useRef(null);

    const change = () => {
        box.current.style.background = 'red';
    }

    return <div>
        {val.count}-{val.address}
        

        <div ref={box}>今天天气真冷</div>
        <button onClick={change}>change</button>
    </div>
}

export default class Context extends Component {
    state = {
        count:111,
        address:'石门山'
    }
    render() {
        let {count,address} = this.state;
        return (
            <div>
                <countContext.Provider value={{count,address}}>
                    <Child/>
                </countContext.Provider>
            </div>
        )
    }
}
